<template>
  <yd-layout>
    <div slot="navbar">
      <!-- <yd-navbar title="首页" bgcolor="#0a0a0a" color="#fff" /> -->
      <yd-tab v-model="state" active-color="#000">
        <yd-tab-panel label="已预约" :tab-key="0"></yd-tab-panel>
        <yd-tab-panel label="已完成" :tab-key="1"></yd-tab-panel>
        <yd-tab-panel label="已违约" :tab-key="3"></yd-tab-panel>
      </yd-tab>
    </div>
    <yd-pullrefresh :callback="handleRefresh" ref="pullrefresh">
      <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
        <div class="order-list" slot="list">
          <template v-if="state == 0">
            <order-list-item v-for="(item, i) in orderList" :key="i">
              <div slot="title">{{item.tname}}</div>
              <div slot="label">
                <div>
                  <span style="font-size:14px;">{{item.uname}}</span> 
                  会员卡余额： ￥{{item.balance / 100}}
                </div>
                <p>{{item.info}}</p>
                <div>
                  {{getFormatDateByTimestamp(item.starttime)}}  -  {{getFormatEndTimeByTimestamp(item.endtime)}}
                </div>
              </div>
              <span slot="action" @click.stop="handleFinishInfo(item)">填写信息</span>
              <span @click.stop="handleFinishConfirm(item)" slot="action">确认完成</span>
            </order-list-item>
          </template>
          <template v-if="state == 1">
            <order-list-item
              v-for="(item, i) in orderList"
              :key="i"
              >
              <div slot="title">{{item.tname}}</div>
              <div slot="label">
                <div>
                  <span style="font-size:14px;">{{item.uname}}</span> 
                  会员卡余额： ￥{{item.balance}}
                </div>
                <p>{{item.info}}</p>
                <div>
                  {{getFormatDateByTimestamp(item.starttime)}}  -  {{getFormatEndTimeByTimestamp(item.endtime)}}
                </div>
              </div>
              <span @click.stop="handleFinishInfo(item)" slot="action">填写信息</span>
              
            </order-list-item>
          </template>
          <template v-if="state == 3">
            <order-list-item
              v-for="(item, i) in orderList"
              :key="i"
              >
                <div slot="title">{{item.tname}}</div>
                <div slot="label">
                  <div>
                    <span style="font-size:14px;">{{item.uname}}</span>
                    会员卡余额： ￥{{item.balance}}
                  </div>
                  <p>{{item.info}}</p>
                  <div>
                    {{getFormatDateByTimestamp(item.starttime)}}  -  {{getFormatEndTimeByTimestamp(item.endtime)}}
                  </div>
                </div>
              <span @click.stop="handleFinishInfo(item)" slot="action">填写信息</span>
              <!-- <span @click.stop="handleFinishConfirm(item)" slot="action">确认完成</span> -->
            </order-list-item>
          </template>
        </div>
        <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
      </yd-infinitescroll>
    </yd-pullrefresh>
    <span slot="doneTip">无数据</span>
    <home-tabbar slot="tabbar" selected="beauticianHome"></home-tabbar>
  </yd-layout>
</template>

<script>
import HomeTabbar from "./home-tabbar";
import OrderListItem from "../components/home-order-item";
import pageMixin from "../../../mixins/page";
import { formatDate } from "../../../utils/utils.js";
export default {
  mixins: [pageMixin],
  components: { HomeTabbar, OrderListItem },
  data() {
    return {
      state: 0,
      loading: false,
      orderList: [],
      orderListPagination: {
        rowsPerPage: 10,
        page: 1,
        total: 0,
      },
    };
  },
  computed: {
    // 美容师主键
    fid() {
      return this.$store.state.uid;
    },
  },
  watch: {
    state() {
      this.$nextTick(() => {
        this.reloadData();
      });
    },
  },
  methods: {
    // 下拉刷新
    async handleRefresh() {
      let res = null;
      res = await this.reloadData().catch(err => {
        _log(err);
      });
      this.$refs["pullrefresh"].$emit("ydui.pullrefresh.finishLoad");
    },
    async loadList() {
      this.loading = true;
      let r = await this.loadData().catch(err => {});
      if (r === "loaded") {
        this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.finishLoad");
      } else {
        this.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.loadedDone");
      }
      this.loading = false;
    },
    handleFinishInfo(item) {
      this.$router.push({
        name: "beauticianFinishInfo",
        params: {
          uid: item.uid,
        },
      });
    },
    // 确认预约完成
    handleFinishConfirm(item) {
      this.$dialog.confirm({
        title: "提示",
        mes: "确认预约完成？",
        opts: () => {
          this.$api
            .completeOrder({
              oid: item.id,
            })
            .then(data => {
              if (data.result) {
                this.reloadData();
              }
              this.$dialog.alert({ mes: data.message });
            })
            .catch(errMsg => {
              this.$dialog.toast({ mes: "网络错误" });
            });
        },
      });
    },
    reloadData() {
      this.orderListPagination.total = 0;
      this.orderListPagination.page = 1;
      this.orderList = [];
      return new Promise((resolve, reject) => {
        this.getOrderListData()
          .then(res => {
            this.orderList = res.rows;
            this.increasePagination(res.total);
            resolve(res);
          })
          .catch(err => {
            this.$dialog.toast({
              mes: err,
              timeout: 1500,
              icon: "error",
            });
            reject(err);
          });
      });
    },
    loadData() {
      return new Promise((resolve, reject) => {
        this.getOrderListData()
          .then(res => {
            if (this.orderList.length < res.total) {
              res.rows.map(item => {
                this.orderList.push(item);
              });
              this.increasePagination(res.total);
              resolve("loaded");
            } else {
              resolve("loadedDone");
            }
          })
          .catch(err => {
            this.$dialog.toast({
              mes: err,
              timeout: 1500,
              icon: "error",
            });
            reject(err);
          });
      });
    },
    getOrderListData() {
      return new Promise((resolve, reject) => {
        this.$api
          .searchBeauticianOrders({
            fid: this.fid,
            state: this.state,
            rows: this.orderListPagination.rowsPerPage,
            page: this.orderListPagination.page,
          })
          .then(data => {
            resolve(data);
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    increasePagination(total) {
      this.orderListPagination.total = total;
      this.orderListPagination.page += 1;
    },
    getFormatDateByTimestamp(timestamp) {
      if (!timestamp) return "";
      let date = new Date(timestamp * 1000);
      if (date) {
        return date.$formatStr("yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    },
    getFormatEndTimeByTimestamp(timestamp) {
      if (!timestamp) return "";
      let date = new Date(timestamp * 1000);
      if (date) {
        return date.$formatStr("hh:mm:ss");
      } else {
        return "";
      }
    },
    init() {
      if (this.fid) {
        this.loadData();
      }
    },
  },
};
</script>

<style lang="scss">
.order-list {
  > div:last-child {
    border-bottom: 0;
  }
}
</style>
